body {
  font-family: Arial, Helvetica, sans-serif;
  font-size:14px;
  min-width:1260px;
}
header {
  padding:30px 150px 80px;
  background-color:#F9F9F9;
  position:relative;
  transition:all .2s linear;
}
/*导航栏区域*/
.container {
  display:flex;
  flex-direction:row;
}
header>nav {
  justify-content:space-between;
  align-items:center;
}
nav>.nav_l {
  width:100px;
  height:40px;
  background:url(../static/pic/themeIcon.svg) no-repeat;
  color:transparent;
  background-size:100% 100%;
}
nav>.nav_r>div {
  display:inline-block;
}
nav>.nav_r>div:first-child {
  width:22px;
  height:22px;
  background:url(../static/pic/me.jpg) no-repeat;
  background-size:100% 100%;
  color:transparent;
  border-radius:50%;
  vertical-align:middle;
  margin-right:6px;
}
nav>.nav_r>div:last-child {
  position:relative;
  width:60px;
  height:18px;
  line-height:20px;
  color:#3EA050;
  font-size:12px;
  font-weight:500;
  text-align:center;
}
nav>.nav_r>div:last-child::after {
  position:absolute;
  top:0;
  left:0;
  display:block;
  content:'';
  width:100%;
  height:100%;
  border:1px solid #8ED99C;
  transform:skewX(-12deg);
}
/*播放界面*/
.playmusic {
  margin-top:42px;
  justify-content:center;
  align-items:center;
}
.playmusic h4 {
  font-weight:normal;
  color:#3EA050;
}
.playArea {
  width:450px;
}
.AreaTop {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  margin:50px 0 30px;
}
.songInfor .songName {
  font-size:20px;
  color:#030303;
}
.songInfor .songAuth {
  color:#666;
  margin-top:6px;
}
.sound .soundProcess {
  width:50px;
  height:2px;
  margin:8px 0 0 5px;
  border-radius:10px;
  background-color:#e1e1e1;
}
.sound {
  display:flex;
}
.sound .isnone {
  display:none
}
.sound .turnSound {
  height:inherit;
  border-radius:inherit;
}
.sound .icon-yinliang {
  display:inline-block;
}
.songProcess {
  width:450px;
  height:2px;
  border-radius:12px;
  background-color:#dadada;
}
#currentProcess {
  height:100%;
  border-radius:12px;
}
.songControl {
  margin-top:50px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  color:#4a4a4a;
}
.control_l .iconfont {
  font-size:30px;
  margin-right:30px
}
.control_r .iconfont{
  font-size:24px;
  margin-left:42px;
}
.playmusic img {
  width:260px;
  height:260px;
  margin-left:50px;
  object-fit:cover;
  border-radius:50%;
}
.switchIcon {
  position:absolute;
  right:150px;
  bottom:50px;
}
.switchIcon .icon-icon- {
  font-size:30px;
  color:#3EA050;
}

/*头部页面收缩后的样式*/
header.active {
  box-sizing:border-box;
  height:100px;
  padding:30px 150px 30px;
  transition:all .2  linear;
}
header.active h4 {
  display:none;
}
header.active .songCover {
  display:none;
}

header.active .nav_r {
  position:relative;
  left:-45px;
}
header.active .nav_r>div:last-child {
  display:none;
}
header.active .sound {
  display:none
}
header.active .songInfor {
  position:absolute;
  top:30px;
  left:320px;
  margin:0;
  display:flex;
}
header.active .songInfor .songAuth {
  position:relative;
  margin-left:15px;
  top:-2px
}
header.active .songProcess {
  width:230px;
  position:absolute;
  top:61px;
  left:320px;
}
header.active .songControl {
  position:absolute;
  margin:0;
  top:40px;
  right:450px;
}
header.active .songControl .iconfont {
  margin:0 12px;
}
header.active .control_l  .iconfont  {
  font-size:22px;
}
header.active .control_r .iconfont {
  font-size:18px;
}
header.active .switchIcon {
  transform:rotate(180deg) translateY(-16px);
}
/*内容模块菜单*/
article {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  margin:42px 0 0;
}
article>div {
  margin:0 50px;
  color:#96959a;
}
article>div>.iconfont {
  display:inline-block;
  font-size:22px;
  margin:0 8px 0 0;
  vertical-align:middle;
}
article>div>span {
  display:inline-block;
  vertical-align:middle;
}